<template>
  <div class="generalize">
    <div v-if="!$store.state.isbusNewsDitle">
      <div class="my_swiper_box">
        <mySwiper
          :urlList="sonList"
          :lef="'-9px'"
          :rig="'-9px'"
          :num="1"
          :bor="1"
          :pag='true'
          :wh="true"
        ></mySwiper>
      </div>
      <div
        class="notice_list"
        v-for="item in sonList"
        :key="item.id"
      >
        <div class="notice_box">
          <i class="yuan"></i>
          <p
            class="notice_name pointer"
            @click="handDitle(item)"
          >{{item.title}}</p>
        </div>

        <!-- <div>
        [ {{item.time}} ]
      </div> -->
      </div>
      <div
        class="page_box"
        style="margin-top: 70px"
      >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5,10,15]"
          :page-size="pageBid3.limit"
          layout="total, prev, pager, next, jumper"
          :total="pageBid3.totalCount"
        >
        </el-pagination>
      </div>
    </div>
    <transition name="fade">
      <div
        v-if="$store.state.isbusNewsDitle"
        class="busDitle_dog"
      >
        <mydetails
          :sonList="sonList"
          :dateils="dateils"
        ></mydetails>
      </div>
    </transition>
  </div>
</template>

<script>
import mySwiper from "@/components/mySwiper";
export default {
  name: "generalize.vue",
  watch: {
    sonList(newlIst, olist) {
      newlIst.forEach(item => {
        item.img = this.$store.state.baseUrl + item.img;
        item.img.split(",").forEach(ele => {
          this.urlList.push({
            url: ele
          });
        });
      });
      this.imgs = newlIst[0].img;
    }
  },
  props: {
    sonList: {
      type: Array
    },
    count: {
      type: Number
    }
  },
  mounted() {
    if (this.count != 0) {
      this.pageBid3.totalCount = this.count;
    }
  },
  components: {
    mySwiper
  },
  data() {
    return {
      imgs: "",
      urlList: [],
      pageBid3: {
        start: 1,
        limit: 10,
        totalCount: 0,
        tatalpage: 0
      }
    };
  },

  methods: {
    handDitle(item) {
      this.dateils = item;
      this.$store.commit("handBus", true);
    },
    handleSizeChange() {},
    handleCurrentChange(val) {
      this.$emit("handSonNav", this.$parent.activeId, val, 10);
    }
  }
};
</script>

<style lang='scss' scoped>
.my_swiper_box ::v-deep .mySwiper {
  padding: 7px;
}
.my_swiper_box {
  margin-bottom: 40px;
  position: relative;
  // height: 332px;
  border: 1px solid #ccc;
}
.notice_list {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.notice_box {
  display: flex;
  align-items: center;
  color: #333;
  font-size: 16px;
  .notice_name {
    margin-left: 20px;
  }
}
.notice_img_box {
  margin-bottom: 40px;
  width: 859px;
  height: 193px;
  border: 1px solid rgba(204, 204, 204, 1);
  padding: 7px;
}
</style>
